import React, {Component} from 'react'
import './index.css'

export default class Item extends Component {
  changeTodoStatus = this.props.changeTodoStatus
  deleteTodo = this.props.deleteTodo
  state = {flag : true}

  render() {
    const {todo} = this.props

    return (
      <li onMouseMove={this.showDeleteBtn} onMouseLeave={this.hiddenBtn}>
        <label>
          <input type="checkbox" onChange={this.changeTodoStatus(todo)} checked={todo.done}/>
          <span>{todo.name}</span>
        </label>
        <button className="btn btn-danger" onClick={this.handleDel(todo.id)} style={{display: this.state.flag ? "block" : "none"}}>删除</button>
      </li>
    )
  }

  showDeleteBtn = (e) => {
    // 不完美的方法
    //if (e.target.nodeName === 'LI') {
    //  e.target.children[1].style.display = 'block'
    //}
    this.setState({flag: true})
  }

  hiddenBtn = (e) => {
    //if (e.target.nodeName === 'LI') {
    //  e.target.children[1].style.display = 'none'
    //}
    this.setState({flag: false})
  }

  handleDel = (id) => {
    return () => {
      this.deleteTodo(id)
    }
  }
}
